<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="登录地址" prop="ipaddr">
        <el-input
          v-model="queryParams.ipaddr"
          placeholder="请输入登录地址"
          clearable
          style="width: 240px;"
          size="small"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户名称" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名称"
          clearable
          style="width: 240px;"
          size="small"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="登录状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="登录时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:logininfor:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleClean"
          v-hasPermi="['system:logininfor:remove']"
        >清空</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:logininfor:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="访问编号" align="center" prop="infoId" />
      <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
      <el-table-column label="地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
      <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
      <el-table-column label="描述" align="center" prop="msg" />
      <el-table-column label="访问时间" align="center" prop="accessTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
        <template #scope>
          <span>{{ parseTime(scope.row.accessTime) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-show="total>0"
      :total="total"
      background
      layout="total, prev, pager, next"
      v-model:current-page="queryParams.pageNum"
      :limit="queryParams.pageSize"
      @current-change="getList"
    />
  </div>
</template>

<script lang="ts">
import { list, delLogininfor, cleanLogininfor } from "@/apis/system/logininfor";
import { defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from "@vue/runtime-core";
export default defineComponent({
  setup(){
    const { proxy } :any=getCurrentInstance();
    const dataMap=reactive({
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        list: [],
        // 状态数据字典
        statusOptions: [],
        // 日期范围
        dateRange: [],
        // 默认排序
        defaultSort: {prop: 'loginTime', order: 'descending'},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          ipaddr: undefined,
          userName: undefined,
          status: undefined
        },
        /** 查询登录日志列表 */
        getList() {
          dataMap.loading = true;
          list(proxy.addDateRange(dataMap.queryParams, dataMap.dateRange)).then(response => {
              dataMap.list = response.rows;
              dataMap.total = response.total;
              dataMap.loading = false;
            }
          );
        },
        // 登录状态字典翻译
        statusFormat(row, column) {
          return proxy.selectDictLabel(dataMap.statusOptions, row.status);
        },
        /** 搜索按钮操作 */
        handleQuery() {
          dataMap.queryParams.pageNum = 1;
          dataMap.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          dataMap.dateRange = [];
          proxy.resetForm("queryForm");
          proxy.$refs.tables.sort(dataMap.defaultSort.prop, dataMap.defaultSort.order)
          dataMap.handleQuery();
        },
        /** 多选框选中数据 */
        handleSelectionChange(selection) {
          dataMap.ids = selection.map(item => item.infoId)
          dataMap.multiple = !selection.length
        },
        /** 排序触发事件 */
        handleSortChange(column, prop, order) {
          dataMap.queryParams['orderByColumn'] = column.prop;
          dataMap.queryParams['isAsc'] = column.order;
          dataMap.getList();
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          const infoIds = row.infoId || dataMap.ids;
          proxy.$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              return delLogininfor(infoIds);
            }).then(() => {
              dataMap.getList();
              proxy.msgSuccess("删除成功");
            }).catch(() => {});
        },
        /** 清空按钮操作 */
        handleClean() {
            proxy.$confirm('是否确认清空所有登录日志数据项?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              return cleanLogininfor();
            }).then(() => {
              dataMap.getList();
              proxy.msgSuccess("清空成功");
            }).catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
          proxy.download('system/logininfor/export', {
            ...dataMap.queryParams
          }, `logininfor_${new Date().getTime()}.xlsx`)
        }
      })
      onMounted(()=>{
        dataMap.getList();
        proxy.getDicts("sys_common_status").then(response => {
          dataMap.statusOptions = response.data;
        });
      })
      return{
        ...toRefs(dataMap)
      }
    }
    
})
</script>

